<template>
  <s-layout title="志愿服务" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Search Bar -->
    <view class="search-bar">
      <input
        v-model="state.searchKeyword"
        class="search-input"
        placeholder="搜索志愿服务..."
        @confirm="handleSearch"
      />
      <text class="search-btn" @tap="handleSearch">🔍</text>
    </view>

    <!-- Tab Filter -->
    <su-sticky bgColor="#f5f5f5">
      <view class="tab-filter">
        <view
          v-for="(tab, index) in state.tabs"
          :key="index"
          :class="['tab-item', { active: state.activeTab === index }]"
          @tap="handleTabChange(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </su-sticky>

    <!-- Service List -->
    <view class="service-list">
      <view
        v-for="service in state.filteredServices"
        :key="service.id"
        class="service-card"
        @tap="handleServiceClick(service)"
      >
        <image :src="service.image" mode="aspectFill" class="service-image" />

        <view class="service-content">
          <view class="service-header">
            <text class="service-title">{{ service.title }}</text>
            <view :class="['service-status', service.statusClass]">
              {{ service.status }}
            </view>
          </view>

          <view class="service-info">
            <view class="info-item">
              <text class="info-icon">👥</text>
              <text class="info-text">需要{{ service.volunteers }}名志愿者</text>
            </view>
            <view class="info-item">
              <text class="info-icon">📍</text>
              <text class="info-text">{{ service.location }}</text>
            </view>
            <view class="info-item">
              <text class="info-icon">⏰</text>
              <text class="info-text">{{ service.time }}</text>
            </view>
            <view class="info-item">
              <text class="info-icon">⭐</text>
              <text class="info-text">积分：{{ service.points }}分</text>
            </view>
          </view>

          <view class="service-footer">
            <view class="service-tags">
              <text v-for="(tag, idx) in service.tags" :key="idx" class="service-tag">
                {{ tag }}
              </text>
            </view>
            <view class="service-progress">
              <text class="progress-text">{{ service.joined }}/{{ service.volunteers }}</text>
              <progress
                :percent="(service.joined / service.volunteers) * 100"
                stroke-width="4"
                activeColor="#ff6b00"
                backgroundColor="#f0f0f0"
              />
            </view>
          </view>

          <button class="join-btn" @tap.stop="handleJoin(service)">
            {{ service.joined >= service.volunteers ? '已满员' : '立即报名' }}
          </button>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive, computed } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  searchKeyword: '',
  activeTab: 0,
  tabs: [
    { name: '全部', value: 'all' },
    { name: '进行中', value: 'ongoing' },
    { name: '即将开始', value: 'upcoming' },
    { name: '已结束', value: 'finished' }
  ],
  serviceList: [
    {
      id: 1,
      title: '社区清洁志愿服务',
      image: '/static/images/service1.jpg',
      status: '招募中',
      statusClass: 'recruiting',
      volunteers: 20,
      joined: 15,
      location: '海城社区',
      time: '2025-12-01 09:00',
      points: 10,
      tags: ['环保', '社区服务'],
      category: 'ongoing'
    },
    {
      id: 2,
      title: '爱心助老服务',
      image: '/static/images/service2.jpg',
      status: '招募中',
      statusClass: 'recruiting',
      volunteers: 10,
      joined: 8,
      location: '文明社区',
      time: '2025-11-28 14:00',
      points: 15,
      tags: ['助老', '关爱'],
      category: 'ongoing'
    },
    {
      id: 3,
      title: '义务支教活动',
      image: '/static/images/service3.jpg',
      status: '即将开始',
      statusClass: 'upcoming',
      volunteers: 15,
      joined: 12,
      location: '和谐社区',
      time: '2025-12-05 10:00',
      points: 20,
      tags: ['教育', '支教'],
      category: 'upcoming'
    },
    {
      id: 4,
      title: '交通安全宣传',
      image: '/static/images/service4.jpg',
      status: '已结束',
      statusClass: 'finished',
      volunteers: 30,
      joined: 30,
      location: '幸福社区',
      time: '2025-11-20 08:00',
      points: 8,
      tags: ['交通', '宣传'],
      category: 'finished'
    }
  ]
})

const filteredServices = computed(() => {
  let result = state.serviceList

  // Filter by tab
  if (state.activeTab > 0) {
    const tabValue = state.tabs[state.activeTab].value
    result = result.filter((s) => s.category === tabValue)
  }

  // Filter by search keyword
  if (state.searchKeyword) {
    result = result.filter((s) => s.title.includes(state.searchKeyword))
  }

  return result
})

state.filteredServices = filteredServices

const handleSearch = () => {
  console.log('Searching for:', state.searchKeyword)
}

const handleTabChange = (index) => {
  state.activeTab = index
}

const handleServiceClick = (service) => {
  sheep.$router.go(`/pages/cmt/service-detail?id=${service.id}`)
}

const handleJoin = (service) => {
  if (service.joined < service.volunteers) {
    sheep.$router.go(`/pages/cmt/service-join?id=${service.id}`)
  } else {
    uni.showToast({
      title: '该活动已满员',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  background: white;
  margin: 30rpx;
  border-radius: 40rpx;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .search-input {
    flex: 1;
    font-size: 28rpx;
  }

  .search-btn {
    font-size: 32rpx;
    color: #ff6b00;
  }
}

.tab-filter {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 24rpx;
  padding: 20rpx;
  display: flex;
  gap: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    border-radius: 16rpx;
    font-size: 26rpx;
    color: #666;
    background: #f5f5f5;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
    }
  }
}

.service-list {
  margin: 0 30rpx;

  .service-card {
    background: white;
    border-radius: 32rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);

    .service-image {
      width: 100%;
      height: 360rpx;
    }

    .service-content {
      padding: 30rpx;

      .service-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .service-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          flex: 1;
        }

        .service-status {
          padding: 8rpx 20rpx;
          border-radius: 20rpx;
          font-size: 22rpx;

          &.recruiting {
            background: #e3f2fd;
            color: #2196f3;
          }

          &.upcoming {
            background: #fff3e0;
            color: #ff9800;
          }

          &.finished {
            background: #f5f5f5;
            color: #999;
          }
        }
      }

      .service-info {
        margin-bottom: 20rpx;

        .info-item {
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;

          .info-icon {
            margin-right: 12rpx;
            font-size: 28rpx;
          }

          .info-text {
            font-size: 26rpx;
            color: #666;
          }
        }
      }

      .service-footer {
        margin-bottom: 20rpx;

        .service-tags {
          display: flex;
          gap: 8rpx;
          margin-bottom: 12rpx;

          .service-tag {
            padding: 6rpx 16rpx;
            border-radius: 12rpx;
            background: #f0f2f5;
            font-size: 22rpx;
            color: #999;
          }
        }

        .service-progress {
          .progress-text {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 8rpx;
            display: block;
          }
        }
      }

      .join-btn {
        width: 100%;
        padding: 24rpx;
        background: linear-gradient(135deg, #ff6b00, #ffa726);
        color: white;
        border: none;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
